<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>[Test] Effects</title>
<link rel="stylesheet" href="effects.css" />
<style>
.example {
    width: 8em;
    margin: 1em;
    border: 3px solid rgba(0, 0, 0, 0.1);
    padding: 0.3em;
    background-color: lightblue;
    font-size: 48px;
}
</style>
</head>
<body>
    <div class="example example-text-effects">
        <div class="est-embossed">浮凸文本</div>
        <div class="est-blind-embossed">浮凸文本</div>
    </div>

    <div class="example example-text-effects">
        <div class="est-debossed">凹陷文本</div>
        <div class="est-blind-debossed">凹陷文本</div>
    </div>

    <div class="example example-text-effects">
        <div class="est-3d">3D文本</div>
    </div>

    <div class="example example-text-effects" style="background-color:#147;">
        <div class="est-glow-1">发光文本</div>
        <div class="est-glow-2">发光文本</div>
    </div>

    <div class="example example-text-effects">
        <div class="est-blurry">模糊文本</div>
    </div>
</body>
</html>
